<?php require __DIR__.'/top.phtml';?>
    <title><?php echo $this->title;?></title>
    <meta name="description" content="<?php echo $this->description;?>" />
    <meta name="keywords" content="<?php echo $this->keywords;?>" />
    <meta name="theme-color" content="#7952b3">
    <link href="/assets/css/vendor/dataTables.bootstrap5.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/vendor/responsive.bootstrap5.css" rel="stylesheet" type="text/css" />

    <link href="/assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/app.min.css" rel="stylesheet" type="text/css" id="light-style" />
    <link href="/assets/css/app-dark.min.css" rel="stylesheet" type="text/css" id="dark-style" />
    </head>
    <body class="loading" data-layout-config='{"leftSideBarTheme":"dark","layoutBoxed":false, "leftSidebarCondensed":false, "leftSidebarScrollable":false,"darkMode":false, "showRightSidebarOnStart": true}'>
<div class="wrapper">
    <?php require __DIR__.'/left.phtml';?>
    <div class="content-page">
        <div class="content">
            <?php require __DIR__.'/nav.phtml';?>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>
                                    <li class="breadcrumb-item active"><?php echo $this->controller;?></li>
                                </ol>
                            </div>
                            <h4 class="page-title"><?php echo $this->controller;?></h4>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row mb-2">
                                    <div class="col-sm-4">
                                        <a href="javascript:void(0);" class="btn btn-danger mb-2"><i class="mdi mdi-plus-circle me-2"></i> <?php echo l($this->controller.'.post');?> <?php echo $this->controller;?></a>
                                    </div>
                                    <div class="col-sm-8">
                                        <div class="text-sm-end">
                                            <button type="button" class="btn btn-success mb-2 me-1"><i class="mdi mdi-cog-outline"></i></button>
                                            <button type="button" class="btn btn-light mb-2 me-1">Import</button>
                                            <button type="button" class="btn btn-light mb-2">Export</button>
                                        </div>
                                    </div>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-centered w-100 dt-responsive nowrap" id="products-datatable">
                                        <thead class="table-light"></thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php require __DIR__.'/foot.phtml';?>
    </div>
</div>
<script src="/assets/js/vendor.min.js"></script>
<script src="/assets/js/app.min.js"></script>

<script src="/assets/js/vendor/jquery.dataTables.min.js"></script>
<script src="/assets/js/vendor/dataTables.bootstrap5.js"></script>
<script src="/assets/js/vendor/dataTables.responsive.min.js"></script>
<script src="/assets/js/vendor/responsive.bootstrap5.min.js"></script>
<script src="/assets/js/vendor/dataTables.checkboxes.min.js"></script>

<script>
    $(document).ready(function() {
        "use strict";
        $("#products-datatable").DataTable({
            ajax: {
                url: '/api/<?php echo $this->controller;?>/v1/',
            },
            lengthMenu: [20, 50, 100, 300, 1000, 'All'],
            processing: true,
            columns: [{
                data: null,
                orderable: !1,
                render: function(e, l, a, o) {
                    return "display" === l && (e = '<div class="form-check"><input type="checkbox" class="form-check-input dt-checkboxes"><label class="form-check-label">&nbsp;</label></div>'),
                        e
                },
                checkboxes: {
                    selectRow: !0,
                    selectAllRender: '<div class="form-check"><input type="checkbox" class="form-check-input dt-checkboxes"></div>'
                }
            },
            <?php
            foreach ($this->cols as $cols) {
                echo json_encode($cols, JSON_UNESCAPED_UNICODE).',';
            }
            ?>
            {
                data: null,
                orderable: !1,
                render: function(e, l, a, o) {
                    return '<td class="table-action"><a href="javascript:void(0);" class="action-icon"> <i class="mdi mdi-eye"></i></a><a href="javascript:void(0);" class="action-icon"> <i class="mdi mdi-square-edit-outline"></i></a><a href="javascript:void(0);" class="action-icon"> <i class="mdi mdi-delete"></i></a></td>';
                }
            }],
            order: [[1, 'asc']],
            drawCallback: function() {
                $('.dataTables_paginate > .pagination').addClass('pagination-rounded')
                $('#products-datatable_length label').addClass('form-label')
            }
        })
    });
</script>
<?php require __DIR__.'/bottom.phtml';?>